Just Sword Wang's Blog

uedbet手机官网下载-uedbet手机app下载

有关uedbet手机官网下载-uedbet手机app下载的主题其实也算是前端相当常见的部分,只是当前端把大把大把的时间和精力放在代码上面的时候,往往总是忽视对于图片的很多效果立竿见影的优化,而之所以这里主要说的是PNG,是因为相比JPG和GIF,PNG有更多压缩的空间。

写此文的契机是前端时间正好回顾了一篇 sitepoint 上的老文,《PNG8 – The Clear Winner》,主要讲述如何使用fireworks创建和利用PNG8的半透明,并兼容老浏览器如IE6-。虽然这篇文章和本文并没有任何关系,却让我回想起一些渐渐被遗忘的知识,作为一个coder的不断coding中渐渐忽视的问题——PNG压缩。

压缩过程毫无技术性,使用诸如 PngOptimizer 或者 PNGOUT 等工具可以轻而易举地将Photoshop、Fireworks生成的PNG图像继续缩小。我几乎总是使用 PNGOUT,原因是使用过各种工具比较得出的结论——PNGOUT生成的文件几乎总是最小的。所以之后的讨论也是以PNGOUT作为基准的

当然在这里,我也额外罗列一些我曾经使用过的工具。所有工具其主页都有详细的使用和说明,所以这里也不再冗述。

  • PNGOUT(本文基准工具)
  • Pngcrush
  • OptiPNG
  • PNGGauntlet
  • Smush.it
  • TweakPNG
  • AliExpress是我的老东家,我打心底里喜欢这家公司和我原属的团队。所以虽然已经离开,但仍不时看看曾经自己努力维护的网站。我有点惭愧在过去从未能想到去优化其首页的图片,只专注代码其实绝对让一个前端走进死胡同。

    AliExpress的主页主要的sprite有三张,当前值以及压缩值如下表:

    文件 原始文件大小(bytes) 压缩后(bytes) 体积减小(bytes) 减小百分比
    top_v5.png
    15111
    12107
    3004
    -20%
    spr_we_buyer_common.png
    16516
    11289
    5227
    -32%
    sprite_home.png
    11562
    9824
    1738
    -16%

    对于这3张 sprite,总共将节约约10K的图片大小。对于首页来说,是相当有意义的。我没有测试 detail 和 list 页,如果连带到这些页面的话,效果应该就更为明显。

    之前就说过,这不是什么了不起的技术,只是想到了和想不到,仅此而已。因为我现在在携程打酱油,所以举得例子也和携程有关——今天(2011/10/17)我对携程的首页的PNG图片也全部都审查了一遍,结果是中文站首页的PNG几乎全部都压过,但却仍然有漏网之鱼——这也就是为什么说,人们容易忽视它,而不是不了解它。

    文件 原始文件大小(bytes) 压缩后(bytes) 体积减小(bytes) 减小百分比
    phone_list.png
    22227
    15172
    7055
    -32%

    这张 phone_list.png 是用于底部携程无线的背景的,更是达到了22K,且不论这张图的原始基础是否有良好的压缩,至少直接用PNGOUT对着它都能压掉7K。对于首页来说,7K仍然有意义。

    不过对于携程英文网站的测试让我颇为沮丧,因为还同时发现了一些其他问题,反推到中文站首页,这些小问题也一并存在。这里我仅仅讨论PNG的问题,列出几张大的PNG压一压的话,对这种一定要用大量图片来实现的设计,效果确是立竿见影的。

    文件 原始文件大小(bytes) 压缩后(bytes) 体积减小(bytes) 减小百分比
    bg_header110621.png
    61372
    53778
    7594
    -13%
    un_bg_findbox.png
    15191
    11556
    3635
    -24%
    un_form_elements.png
    6941
    4664
    2277
    -33%
    un_bg_home.png
    15171
    11495
    3676
    -25%
    un_btns.png
    16301
    12332
    3969
    -25%
    btn_book.png
    8497
    7873
    624
    -8%
    bg_book.png
    7215
    6522
    693
    -10%
    un_bg_ad.png
    4990
    2355
    2635
    -53%

    未列出全部,但已经压掉了25K,很可观了,特别是对于主页来说。

    最后推荐阅读PNG优化里有名的 A guide to PNG optimization

    虽然我也曾是个蹩脚的设计师,不过这恐怕是我成为一个前端以来,第一次如此关注图片而非代码。有些曾经的东西,偶然的随意拾起来,虽然可能不足挂齿,却可能真的是个宝——我拾起的不是PNG压缩,而是对过往努力的怀念,是一个时期的证明


    评论加载中...

    Disqus提供评论支持,如果评论长时间未加载,请飞跃长城。